<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  <!-- 谷歌收录 -->
  <meta name="google-site-verification" content="-5hl8eC4wfapGZhZouwMVUcKG0iaynijVRJbqVlzXm4" />
  
  
  <title>搭建Github图床并利用jsDelivr加速 | 鴻塵</title>
  <meta name="description" content="摘要：之前都是将博文图片直接放在images文件夹下，图片加载较慢，故搭建Github图床并利用jsDelivr加速（先看后记有惊喜）。">
<meta property="og:type" content="article">
<meta property="og:title" content="搭建Github图床并利用jsDelivr加速">
<meta property="og:url" content="https://hwame.top/20201125/github-pics-with-jsdelivr.html">
<meta property="og:site_name" content="鴻塵">
<meta property="og:description" content="摘要：之前都是将博文图片直接放在images文件夹下，图片加载较慢，故搭建Github图床并利用jsDelivr加速（先看后记有惊喜）。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125新建仓库.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125上传文件.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125配置token.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125访问令牌.png">
<meta property="article:published_time" content="2020-11-25T03:13:37.000Z">
<meta property="article:modified_time" content="2020-11-27T01:56:23.000Z">
<meta property="article:author" content="鴻塵">
<meta property="article:tag" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125新建仓库.png">
  <!-- Canonical links -->
  <link rel="canonical" href="https://hwame.top/20201125/github-pics-with-jsdelivr.html">
  
    <link rel="alternate" href="true" title="鴻塵" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
    <link href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css" rel="stylesheet">
  
  
<meta name="generator" content="Hexo 5.4.2"></head>


<script src="https://cdn.jsdelivr.net/gh/bobcn/hexo_resize_image.js@master/hexo_resize_image.js"></script>
<body class="main-center theme-purple" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://hwame.top" target="_blank">
          <img class="img-circle img-rotate" src="https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">鴻塵</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">Pythoner, Data Analyst</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> 湖北-武汉</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder-open"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-repository">
          <a href="/repository">
            
            <i class="icon icon-project"></i>
            
            <span class="menu-title">资源</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-gallery">
          <a href="/gallery">
            
            <i class="icon icon-delicious"></i>
            
            <span class="menu-title">相册</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">友链</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/hwame" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/hwamei" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://www.zhihu.com/people/hwame" target="_blank" title="Zhihu" data-toggle=tooltip data-placement=top><i class="icon icon-zhihu"></i></a></li>
        
        <li><a href="https://segmentfault.com/u/hwame" target="_blank" title="Segmentfault" data-toggle=tooltip data-placement=top><i class="icon icon-segmentfault"></i></a></li>
        
        <li><a href="https://gitee.com/hwame" target="_blank" title="Gitee" data-toggle=tooltip data-placement=top><i class="icon icon-gitee"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-stackexchange"></i>公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎来到鴻塵的博客!<br>鴻塵的<u><a target="_blank" rel="noopener" href="https://weibo.com/hwamei" style="color:#E541E5;">微博</a></u>主页，鴻塵的<u><a target="_blank" rel="noopener" href="https://github.com/hwame" style="color:#E541E5;">Github</a></u>主页，如果我可以忘记的<u><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/hwame" style="color:#E541E5;">知乎</a></u>主页。</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-tags"></i>标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/CentOS/" style="font-size: 13px; color: #fff">CentOS</a> <a href="/tags/Go/" style="font-size: 13.2px; color: #fff">Go</a> <a href="/tags/Hexo/" style="font-size: 13.8px; color: #fff">Hexo</a> <a href="/tags/Linux/" style="font-size: 14px; color: #fff">Linux</a> <a href="/tags/Linux%E9%83%A8%E7%BD%B2/" style="font-size: 13px; color: #fff">Linux部署</a> <a href="/tags/MongoDB/" style="font-size: 13.4px; color: #fff">MongoDB</a> <a href="/tags/Spark/" style="font-size: 13px; color: #fff">Spark</a> <a href="/tags/matplotlib/" style="font-size: 13.2px; color: #fff">matplotlib</a> <a href="/tags/miscellanea/" style="font-size: 13.6px; color: #fff">miscellanea</a> <a href="/tags/python/" style="font-size: 14px; color: #fff">python</a> <a href="/tags/shell/" style="font-size: 13.6px; color: #fff">shell</a> <a href="/tags/%E5%A4%A7%E6%95%B0%E6%8D%AE/" style="font-size: 13px; color: #fff">大数据</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/" style="font-size: 13px; color: #fff">数据结构与算法</a> <a href="/tags/%E7%88%AC%E8%99%AB/" style="font-size: 13px; color: #fff">爬虫</a>
    </div>
  </div>

<script type="text/javascript">
    var everytag=document.getElementsByClassName("widget-body tagcloud")[0].children;
    for (var i = everytag.length - 1; i >= 0; i--) {
    	var r=Math.floor(Math.random()*255);
        var g=Math.floor(Math.random()*255);
        var b=Math.floor(Math.random()*255);
        everytag[i].style.background = "rgb("+r+","+g+","+b+")";
    }
</script>
    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-folder-open"></i>分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Go/">Go</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Hexo/">Hexo</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/MongoDB/">MongoDB</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/miscellanea/">miscellanea</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/python/">python</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/">数据结构与算法</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-archives-fill"></i>归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/">2020</a><span class="archive-list-count">17</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title"><i style="color:#9400D3" class="icon icon-shu-fill"></i>最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled ">
        
          <li>
            
            <div class="item-thumb">
              <a href="/20220327/channel-and-goroutine-in-go.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/post-pics/icon-golang.jpeg)" alt="Go语言中的通道" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Go/">Go</a>
              </p>
              <p class="item-title">
                <a href="/20220327/channel-and-goroutine-in-go.html" class="title">Go语言中的通道</a>
              </p>
              <p class="item-date">
                <time datetime="2022-03-27T11:06:16.000Z" itemprop="datePublished">2022-03-27</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20220323/when-to-use-pointer-in-go.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/post-pics/icon-golang.jpeg)" alt="Go语言什么时候使用指针" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Go/">Go</a>
              </p>
              <p class="item-title">
                <a href="/20220323/when-to-use-pointer-in-go.html" class="title">Go语言什么时候使用指针</a>
              </p>
              <p class="item-date">
                <time datetime="2022-03-23T12:49:57.000Z" itemprop="datePublished">2022-03-23</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20220228/awesome-images-in-markdown.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg)" alt="Markdown中图片的高级用法" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/miscellanea/">miscellanea</a>
              </p>
              <p class="item-title">
                <a href="/20220228/awesome-images-in-markdown.html" class="title">Markdown中图片的高级用法</a>
              </p>
              <p class="item-date">
                <time datetime="2022-02-28T15:27:50.000Z" itemprop="datePublished">2022-02-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20220116/shell-regular-expression.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/post-pics/linux-icon.png)" alt="Shell正则表达式" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Linux/">Linux</a>
              </p>
              <p class="item-title">
                <a href="/20220116/shell-regular-expression.html" class="title">Shell正则表达式</a>
              </p>
              <p class="item-date">
                <time datetime="2022-01-16T14:13:05.000Z" itemprop="datePublished">2022-01-16</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/20211009/install-linux-on-android-phone.html" class="thumb">
    
    
        <span style="background-image:url(https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg)" alt="如何在安卓手机上安装Linux发行版" class="thumb-image"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/miscellanea/">miscellanea</a>
              </p>
              <p class="item-title">
                <a href="/20211009/install-linux-on-android-phone.html" class="title">如何在安卓手机上安装Linux发行版</a>
              </p>
              <p class="item-date">
                <time datetime="2021-10-09T15:16:37.000Z" itemprop="datePublished">2021-10-09</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    <nav id="toc" class="article-toc">
      <h3 class="toc-title">文章目录</h3>
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E6%90%AD%E5%BB%BAGithub%E5%9B%BE%E5%BA%8A"><span class="toc-number">1.</span> <span class="toc-text">1.搭建Github图床</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E6%96%B0%E5%BB%BA%E4%BB%93%E5%BA%93"><span class="toc-number">1.1.</span> <span class="toc-text">1.1.新建仓库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87"><span class="toc-number">1.2.</span> <span class="toc-text">1.2.上传图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-%E4%BD%BF%E7%94%A8%E5%9B%BE%E7%89%87"><span class="toc-number">1.3.</span> <span class="toc-text">1.3.使用图片</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E4%BD%BF%E7%94%A8PicGo%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87"><span class="toc-number">2.</span> <span class="toc-text">2.使用PicGo上传图片</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-%E8%AF%B4%E6%98%8E"><span class="toc-number">2.1.</span> <span class="toc-text">2.1.说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-%E7%94%9F%E6%88%90%E4%BB%A4%E7%89%8C"><span class="toc-number">2.2.</span> <span class="toc-text">2.2.生成令牌</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-PicGo%E9%85%8D%E7%BD%AE"><span class="toc-number">2.3.</span> <span class="toc-text">2.3.PicGo配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-PicGo%E4%BD%BF%E7%94%A8"><span class="toc-number">2.4.</span> <span class="toc-text">2.4.PicGo使用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%9B%BE%E5%BA%8A%E8%BF%81%E7%A7%BB"><span class="toc-number">3.</span> <span class="toc-text">3.图床迁移</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%90%8E%E8%AE%B0"><span class="toc-number">4.</span> <span class="toc-text">4.后记</span></a></li></ol>
    </nav>
  </div>
</aside>

<main class="main" role="main">
  <div class="content">
  <article id="post-github-pics-with-jsdelivr" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      搭建Github图床并利用jsDelivr加速
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar"></i>
	<a href="/20201125/github-pics-with-jsdelivr.html" class="article-date">
	  发布于 <time datetime="2020-11-25T03:13:37.000Z" itemprop="datePublished">2020-11-25</time>
	</a>
</span>
<span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/20201125/github-pics-with-jsdelivr.html" class="article-date">
	  更新于 <time datetime="2020-11-27T01:56:23.000Z" itemprop="dateUpdated">2020-11-27</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/categories/Hexo/">Hexo</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/tags/Hexo/" rel="tag">Hexo</a>
  </span>


        

	<span class="article-read hidden-xs">
    	<i class="icon icon-eye-fill" aria-hidden="true"></i>
    	<span id="/20201125/github-pics-with-jsdelivr.html" class="leancloud_visitors"  data-flag-title="搭建Github图床并利用jsDelivr加速">
			<span class="leancloud-visitors-count">0</span>
		</span>
    </span>

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/20201125/github-pics-with-jsdelivr.html#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 1.5k(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 5(分)</span>
	

      </div>
      <div style="background-color:#D7BDE2;border:1px solid #D7BDE2;border-radius:10px;padding:5px">
          <b>温馨提示</b>：点击页面下方<i style="color:red" class="icon icon-anchor"></i>以展开或折叠目录
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <p>摘要：之前都是将博文图片直接放在<code>images</code>文件夹下，图片加载较慢，故搭建<code>Github</code>图床并利用<code>jsDelivr</code>加速（先看<a href="#4-%E5%90%8E%E8%AE%B0">后记</a>有惊喜）。<span id="more"></span></p>
<blockquote>
<p><font size=5><b>文章说明</b></font><br><strong>文章作者：</strong><a href="https://hwame.top">鴻塵</a><br><strong>文章链接：</strong><a href="https://hwame.top/20201125/github-pics-with-jsdelivr.html">https://hwame.top/20201125/github-pics-with-jsdelivr.html</a></p>
</blockquote>
<h2 id="1-搭建Github图床"><a href="#1-搭建Github图床" class="headerlink" title="1.搭建Github图床"></a>1.搭建Github图床</h2><h3 id="1-1-新建仓库"><a href="#1-1-新建仓库" class="headerlink" title="1.1.新建仓库"></a>1.1.新建仓库</h3><p>登陆<code>Github</code>账户，新建仓库【或直接点击<a target="_blank" rel="noopener" href="https://github.com/new">https://github.com/new</a>】，按如下设置后点击<code>Create repository</code>，如图所示：</p>
<ul>
<li><code>Repository name</code>：仓库名称（英文），即图床名；</li>
<li><code>Description</code>：描述；</li>
<li><code>Public/Private</code>：选择公开；</li>
<li><code>Add a README file</code>：使用<code>README.md</code>初始化，可选。</li>
</ul>
<p><img src="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125新建仓库.png" alt="新建仓库"></p>
<h3 id="1-2-上传图片"><a href="#1-2-上传图片" class="headerlink" title="1.2.上传图片"></a>1.2.上传图片</h3><p>仓库创建完成后，就已经可以直接使用了。<br>可以直接在网页端点击<code>Add file</code>→<code>Upload files</code>即可上传文件/文件夹，如图所示：<br><img src="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125上传文件.png" alt="上传图片"></p>
<p>也可以使用其他软件，如PicGo等【需要访问令牌，见下文】。</p>
<h3 id="1-3-使用图片"><a href="#1-3-使用图片" class="headerlink" title="1.3.使用图片"></a>1.3.使用图片</h3><p>对于仓库中的文件（图片），有以下两种方式：<br><strong>说明：</strong>使用<code>jsDelivr</code>的<code>CDN</code>加速服务，它可以加速Github仓库的文件，免费且无需注册、无需额外配置，只需要一个正确的<code>URL</code>即可。<br><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 直接引用</span></span><br><span class="line">![图片描述](https:<span class="regexp">//</span>raw.githubusercontent.com<span class="regexp">/username/</span>repos<span class="regexp">/branch/</span>path/xxx.png)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 使用CDN加速</span></span><br><span class="line">![图片描述](https:<span class="regexp">//</span>cdn.jsdelivr.net<span class="regexp">/gh/u</span>sername<span class="regexp">/repos@version/</span>path/xxx.png)</span><br></pre></td></tr></table></figure><br>以下是两种方式使用效果，感受一下加载速度的区别：</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://raw.githubusercontent.com/hwame/pics/main/avatar.jpg">https://raw.githubusercontent.com/hwame/pics/main/avatar.jpg</a></li>
<li><a target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg">https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg</a></li>
</ul>
<hr>
<h2 id="2-使用PicGo上传图片"><a href="#2-使用PicGo上传图片" class="headerlink" title="2.使用PicGo上传图片"></a>2.使用PicGo上传图片</h2><h3 id="2-1-说明"><a href="#2-1-说明" class="headerlink" title="2.1.说明"></a>2.1.说明</h3><p><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/PicGo">PicGo</a>是一个用于快速上传图片并获取图片<code>URL</code>链接的开源工具，使用它可以解放写作双手、提高生产力。使用PicGo的原因仅仅是因为能够方便地将上传图片到Github，并直接获取jsDelivr的加速后的图片地址。</p>
<p>下载地址：<a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/PicGo/releases">https://github.com/Molunerfinn/PicGo/releases</a></p>
<p><strong>说明：</strong>由于使用PicGo上传文件需要获取控制仓库的权限，因此需要访问令牌，如果不需要借助第三方工具上传，则无需此步骤，自行取舍（比如我还是喜欢自己动动手）。<br><strong>说明：</strong>由于我未使用第三方工具，此部分主要目的是解释一下token并不是必须的，内容参考<a target="_blank" rel="noopener" href="https://blog.iljw.me/">如风蒹葭</a>的文章<a target="_blank" rel="noopener" href="https://blog.iljw.me/2019/05/jsdelivr-cdn-github.html">使用 jsDelivr CDN 加速 Github 仓库的图片，以作为博客的图床</a>。</p>
<h3 id="2-2-生成令牌"><a href="#2-2-生成令牌" class="headerlink" title="2.2.生成令牌"></a>2.2.生成令牌</h3><p>以此点击头像→<code>Settings</code>→<code>Developer settings</code>→<code>Personal access tokens</code>【或直接点击<a target="_blank" rel="noopener" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a>】，可以看到已有的访问令牌，但是口令只显示一次，所以不可复用，需要重新生成。<br>点击<code>Generate new token</code>，可能需要输入密码，在    <code>New personal access token</code>中填写备注、勾选<code>repo</code>整个复选框，如图所示。<br><img src="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125配置token.png" alt="配置token"></p>
<p>最后点击<code>Generate token</code>即可，将生成的<code>token</code>【图中打码处】复制保存，<strong>只显示一次，否则需要重新生成</strong>，如图所示。<br><img src="https://cdn.jsdelivr.net/gh/hwame/pics@main/hexo/20201125访问令牌.png" alt="访问令牌"></p>
<h3 id="2-3-PicGo配置"><a href="#2-3-PicGo配置" class="headerlink" title="2.3.PicGo配置"></a>2.3.PicGo配置</h3><p>下载安装好以后，配置「Github图床」：</p>
<ul>
<li>设定仓库名：Github仓库，格式为<code>username/repos</code>，示例：<code>hwame/pics</code>。</li>
<li>设定分支名：Github仓库的分支，格式为<code>branch</code>，示例：<code>main</code>。<blockquote>
<p><strong>注意：</strong>由于众所周知的原因，Github新创建的仓库默认分支已不再是<code>master</code>而是<code>main</code>了！！</p>
</blockquote>
</li>
<li>设定<code>Token</code>：即上一步生成的访问令牌。</li>
<li>指定存储路径：可选。不填则为仓库根目录，建议按图片分类放在不同文件夹下。</li>
<li>设定自定义域名：此即<code>jsDelivr</code>的配置，格式为<code>https://cdn.jsdelivr.net/gh/username/repos@branch</code>，示例：<code>https://cdn.jsdelivr.net/gh/hwame/pics@main</code><ul>
<li><code>gh</code>：表示来自<code>Github</code>的内容；</li>
<li><code>username</code>：Github用户名；</li>
<li><code>repos</code>：Github仓库；</li>
<li><code>branch</code>：仓库分支，注意是<code>master</code>还是<code>main</code>。</li>
</ul>
</li>
</ul>
<h3 id="2-4-PicGo使用"><a href="#2-4-PicGo使用" class="headerlink" title="2.4.PicGo使用"></a>2.4.PicGo使用</h3><p>PicGo配置完成后即可使用了，它支持拖拽、点击、剪贴板上传，上传后，图片链接直接复制的你的剪贴板中，极大地提高了生产效率。</p>
<hr>
<h2 id="3-图床迁移"><a href="#3-图床迁移" class="headerlink" title="3.图床迁移"></a>3.图床迁移</h2><p>截至目前，博客使用的「图床」共有以下几种：</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://imgchr.com/hwamei">路过图床</a>：<ul>
<li>优点：免费且稳定，可创建多相册，图片可标记</li>
<li>缺点：需要额外使用邮箱注册账号，内容不易维护</li>
</ul>
</li>
<li><a target="_blank" rel="noopener" href="https://www.aliyun.com/">阿里云服务器</a>：<ul>
<li>优点：对文件拥有绝对权限，可定制程度高，任何部分都可以随心所欲地配置（<del>只要你有钞能力</del>）</li>
<li>缺点：价格与网络带宽直接挂钩，有使用期限，服务器到期后文件迁移及博客内容更新耗时费力，最主要还是<strong>贵</strong>！</li>
</ul>
</li>
<li><a target="_blank" rel="noopener" href="https://raw.githubusercontent.com">直接引用Github图片</a>：<ul>
<li>直接引用只在「文章缩略图」作为图标引用的，例如<a target="_blank" rel="noopener" href="https://raw.githubusercontent.com/hexojs/logo/master/hexo-logo-avatar.png">Hexo Logo</a>，图标文件一般较小，因此没必要放到图床上，不必迁移</li>
</ul>
</li>
<li>直接放在「本地」，和博客文件放在一起：<ul>
<li>优点：静态文件都在一个地方，管理较为方便</li>
<li>缺点：<strong>慢！</strong></li>
</ul>
</li>
</ul>
<p>基于以上因素，我决定将所有图片都放在Github图床上，并使用jsDelivr加速，迁移内容主要有：</p>
<ul>
<li>文章图片；</li>
<li>相册图片；</li>
<li>最新文章缩略图；</li>
</ul>
<p>目前看来体验还不错。最主要的是，Hexo博客的文件和图片文件都托管在Github上了，管理起来很方便，不用担心服务器挂掉或者到期，也不用担心其他图床失效，而且通过jsDelivr加速后图片资源加载速度有明显改善，网站浏览体验满分~</p>
<hr>
<h2 id="4-后记"><a href="#4-后记" class="headerlink" title="4.后记"></a>4.后记</h2><p>写到这里其实可以发现，jsDelivr和图片在哪个仓库并没有什么关系！我们不必单独新建仓库，在<code>./themes/pure/source/</code>文件夹下的文件都会直接上传到<code>hwame.github.io</code>仓库的根目录，所以我们在<code>./themes/pure/source/images/</code>下的文件会同步到<code>hwame/hwame.github.io/images/</code>下，因此也可以直接利用jsDelivr加速！</p>
<p>只需要将原来的图片地址<code>/images/xxx.png</code>对应修改为<code>https://cdn.jsdelivr.net/gh/hwame/hwame.github.io@master/images/xxx.png</code>即可，同一张图片【<a target="_blank" rel="noopener" href="https://github.com/hwame/hwame.github.io/blob/master/images/avatar.jpg">Github文件位置</a>】的测试：</p>
<ul>
<li><a href="https://hwame.top/images/avatar.jpg">https://hwame.top/images/avatar.jpg</a></li>
<li><a target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/gh/hwame/hwame.github.io@master/images/avatar.jpg">https://cdn.jsdelivr.net/gh/hwame/hwame.github.io@master/images/avatar.jpg</a></li>
</ul>
<p><font size=4><b>结论：</b></font><br><u>所以没必要重新创建图床仓库，只需要更新一下文章的图片链接即可。</u></p>

      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    <li class="post-copyright-license">
      <strong>文章作者： </strong><a href="https://hwame.top" style="color:#E541E5;"> 鴻塵</a>
    </li>
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://hwame.top/20201125/github-pics-with-jsdelivr.html" title="搭建Github图床并利用jsDelivr加速" target="_blank" rel="external" style="color:#E541E5;">https://hwame.top/20201125/github-pics-with-jsdelivr.html</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用《<a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external" style="color:#E541E5;"><u>CC BY 4.0 CN协议</u></a>》许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://hwame.top" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="https://cdn.jsdelivr.net/gh/hwame/pics@main/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://hwame.top" target="_blank"><span class="text-dark">鴻塵</span><small class="ml-1x">Pythoner, Data Analyst</small></a></h3>
        <div>个人简介：处女座不适合做码农。</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/20201127/learning-linux-shell-script.html" title="Linux下shell脚本编程学习"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/20201020/python-lambda-in-a-for-loop.html" title="循环中的lambda函数产生的作用域及闭包问题"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
    <li class="toggle-toc">
      <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false" title="文章目录" role="button">
        <span style="color:#C71585">[&nbsp;</span><span style="color:#C71585">文章目录</span>
        <i class="text-collapsed icon icon-anchor"></i>
        <i class="text-in icon icon-close"></i>
        <span style="color:#C71585">]</span>
      </a>
    </li>
    
  </ul>
  
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,wechat,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  


</main>

  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/hwame" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/hwamei" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://www.zhihu.com/people/hwame" target="_blank" title="Zhihu" data-toggle=tooltip data-placement=top><i class="icon icon-zhihu"></i></a></li>
        
        <li><a href="https://segmentfault.com/u/hwame" target="_blank" title="Segmentfault" data-toggle=tooltip data-placement=top><i class="icon icon-segmentfault"></i></a></li>
        
        <li><a href="https://gitee.com/hwame" target="_blank" title="Gitee" data-toggle=tooltip data-placement=top><i class="icon icon-gitee"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        &copy; 2025 鴻塵
        
        
        <div class="publishby" style="font-family:Courier">
            <span id="busuanzi_container_site_pv">
                <i class="icon icon-eye"></i><span id="busuanzi_value_site_pv" style="font-family:Courier"></span>&nbsp;
                <i class="icon icon-users"></i><span id="busuanzi_value_site_uv" style="font-family:Courier"></span>
            </span>
            <!--
            <br>✯<a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" style="color:#0FFFAA">鄂ICP备2020019329号</a>
            -->
            <br><i class="icon icon-clock" style="transform:rotate(90deg)"></i><span id="sitetime" style="font-family:Courier"></span>
        </div>
        
        <!--
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
        -->
    </div>
    
</footer>
<script>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2020,05,19,21,20,52); //建站时间
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        // 将「数字」转「补零字符串」
        var y = diffYears.toString()
        var d = diffDays.toString().padStart(3, '0')
        var h = diffHours.toString().padStart(2, '0')
        var m = diffMinutes.toString().padStart(2, '0')
        var s = diffSeconds.toString().padStart(2, '0')
        document.getElementById("sitetime").innerHTML=y+":"+d+":"+h+":"+m+":"+s;
    }
    siteTime();
</script>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<div id="go-top"></div>
<style type="text/css">
#go-top {
 width:40px;height:40px;
 background-color:#DDA0DD;
 position:relative;
 border-radius:20px;
 position:fixed;right:20px;bottom:50px;
 cursor:pointer;display:none;
}
#go-top:after {
 content:" ";
 position:absolute;left:14px;top:14px;
 border-top:2px solid #fff;border-right:2px solid #fff;
 width:12px;height:12px;
 transform:rotate(-45deg);
}
#go-top:hover {
 background-color:#8A2BE2;
}
</style>
<script>
$(function () {
  var top=$("#go-top");
  $(window).scroll(function () {
    ($(window).scrollTop() > 300) ? top.show(300) : top.hide(200);
    $("#go-top").click(function () {
      $('body,html').animate({scrollTop:0});
      return false();
    })
  });
});
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>





   




   
    

  <script src='/waline.js'></script>
  <link rel="stylesheet" type="text/css" href="/waline.css" />
  
  <script type="text/javascript">
 
  
Waline.init({
      el: '#vcomments',
      serverURL: 'https://waline.hwame.top',
});
  </script>

     


<!-- 20201211添加判断 -->

   
  <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script>
  <script>
  //利用 FancyBox 实现点击图片放大
  $(document).ready(function() {
    $('article img').not('[hidden]').not('.panel-body img').each(function() {
      var $image = $(this);
      var imageCaption = $image.attr('alt');
      var $imageWrapLink = $image.parent('a');
      if ($imageWrapLink.length < 1) {
        var src = this.getAttribute('src');
        var idx = src.lastIndexOf('?');
        if (idx != -1) {
          src = src.substring(0, idx);
        }
        $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a');
      }
      $imageWrapLink.attr('data-fancybox', 'images');
      if (imageCaption) {
        $imageWrapLink.attr('data-caption', imageCaption);
      }
    });
    $().fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: true,
    });
  });
  </script>







  
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
      z-index: 2;
    }

    .highlight-wrap:hover .copy-btn,
        .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  
  <script>
    addLoadEvent(()=>{
      $('.highlight').each(function (i, e) {
        var $wrap = $('<div>').addClass('highlight-wrap')
        $(e).after($wrap)
        $wrap.append($('<button>').addClass('copy-btn').append('一键复制').on('click', function (e) {
          var code = $(this).parent().find(".code")[0].innerText
          
          var ta = document.createElement('textarea')
          document.body.appendChild(ta)
          ta.style.position = 'absolute'
          ta.style.top = '0px'
          ta.style.left = '0px'
          ta.value = code
          ta.select()
          ta.focus()
          var result = document.execCommand('copy')
          document.body.removeChild(ta)
          
            if(result)$(this).text('复制成功')
            else $(this).text('复制失败')
          
          $(this).blur()
        })).on('mouseleave', function (e) {
          var $b = $(this).find('.copy-btn')
          setTimeout(function () {
            $b.text('一键复制')
          }, 300)
        }).append(e)
      })
    })
  </script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</body>
</html>